<template>
    <div>
        房型名称：<input type="text" v-model="info.hname" />
       
        状态：<select v-model="info.start">
            <option value="">请选择</option>
            <option value="1">启用</option>
            <option value="2">禁用</option>
        </select>
        <button class="btn btn-primary" @click="getlist">查询</button>
        <button class="btn btn-primary" @click="add">重置</button>
        <h1>列表</h1>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <th>房型名称</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>状态</th>
                    <th>房间号</th>
                    <th>操作</th>
                </tr>
                <tr v-for="item in data.list" >
                    <td>{{ item.name }}</td>
                    <td>￥{{ item.moany }}</td>
                    <td>{{ item.num }}</td>
                    <td>{{ item.start=1?"启用":"禁用" }}</td>
                    <td>{{ item.card }}</td>
                   <td>
                    <button class="btn btn-primary" @click="update">修改</button>
                    <button class="btn btn-danger" @click="del">删除</button>
                   </td>
                </tr>
            </tbody>
        </table>
          
 </div>
 <div>
       <!--显示-->
      <span>共<b>{{ data.totalCount }}</b>条</span >
      <span>每页<b>{{ info.pageSize }}</b>条</span >
      <span >共<b>{{ info.pageIndex }}/{{ data.totalPage }}</b>页</span>
      <!-- 分页  全都是改是页码 -->
      <input type="button" value="首页" @click="goPage(1)" />
      <input type="button" value="上一页" @click="goPage(info.pageIndex - 1)" />
      <span v-for="item in data.totalPage" @click="goPage(item)">{{item}}</span>
      <input type="button" value="下一页" @click="goPage(info.pageIndex + 1)" />
      <input type="button" value="尾页" @click="goPage(data.totalPage)" />
      <input type="number" v-model="info.pageIndex" />
      <input type="button" value="跳转" @click="goPage(info.pageIndex)" />
      <!-- 这个改的页容量  -->
      <select v-model="info.pageSize" @change="show">
        <option :value="item" v-for="item in arr">每页{{ item }}条</option>
      </select> 
      
    </div>
    
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();
let info :any = reactive({

pageIndex: 1,
  pageSize: 2, 
      hname: "",
  start: "",
});
let data: any = reactive({
    list: [],
    totalCount: 0, 
    
    totalPage: 0, 
});
onMounted(() => {
    getlist();
});
let arr = [2, 5, 10, 20];


const goPage = (num: any) => {
    
    if (num < 1) {
       info.pageIndex = 1;
       return;

    }
    if(num>data.totalPage){
        info.pageIndex=data.totalPage;
        return  ; 
    }
    info.pageIndex = num;
    getlist();
    return;
}
const show = () => {
    info.pageIndex = 1;
    getlist();
}
const getlist = () => {
    axios({
        url: '/api/House/GetAll',
        method: 'get',
        params: info
    })
        .then((res) => {
            data.list = res.data.list; 
            data.totalCount = res.data.totalCount;
            data.totalPage = res.data.totalPage;
            console.log(res);

        })
        .catch((err) => {
            console.log(err); 
        });
  
      
 
}
const del = (id: any) => {
   var res=confirm('你确定要删除吗？');
  if(res){
    axios({
        url: '/api/House/del',
        method: 'get',
        params: { Id: id }
    })
        .then((res) => {
            if(res.data.code>0){
                alert('删除失败');
                return;
            }
            else{
                alert('删除成功');
               
                getlist(); 
            }
            console.log(res);
            getlist();
        })
        .catch((err) => {
            console.log(err);
        }); 
  }
}
const update = (id: any) => {
    router.push({ path: '/update', query: { Id: id } });
}
</script>

<style scoped>

</style>